<template>
  <div style="width: 450px; height: 560px; margin-left: 12px; margin-top: -20px">
    <div ref="screen" style="width: 100%; height: 540px; float: left; background-color: black">
      <video ref="videoCtrl" style='width: 100%; height: 100%; object-fit: fill; display: none'></video>
      <canvas ref="canvasCtrl" style='width: 100%; height: 100%; background-color: #00a0e9; margin-left: 10px; margin-top: 10px; display: none'></canvas>
      <img ref="imgCtrl" style='width: 660px; height: 460px; float: left; display: none; margin-left: 70px' :src="require('E://images/' + imgPath)"/>
    </div>
<!--    <el-upload
      ref="upload"
      style="position: absolute;  margin-left: 384px; margin-top: 20px"
      action=""
      :auto-upload="true"
      :multiple="false"
      :show-file-list="false"
      :before-upload="beforeUpload"
      :file-list="fileList">
      <el-button size="small" type="primary" @click="hideVideo">相片注册</el-button>
    </el-upload>-->
    <el-button size="small" style="margin-top: 20px; margin-left: 120px" type="primary" @click="takeVideo">摄像注册</el-button>
    <el-button size="small" style="margin-left: 60px; margin-top: 20px; position: absolute" type="danger" @click="takePhoto">提交人脸</el-button>
  </div>
</template>

<script>
  import { getToken } from '@/utils/auth'
  import { addInfo } from '../../../api/face/face'
  export default {
    data() {
      return {
        // 上传附件带上token
        headers: {
          'Authorization': getToken()
        },
        fileList: [],
        form: {
          image: '',
          userId: this.$store.state.user.userId,
        },
        isShowVideo: false,
        imgPath: 'beautiful.jpg',
      }
    },
    methods: {
      hideVideo() {
        this.$refs.videoCtrl.pause()
        this.$refs.screen.style.background = 'none'
        this.$refs.videoCtrl.style.display = 'none'
        this.$refs.imgCtrl.style.display = 'block'
      },
      beforeUpload(file) {
        console.log(file)
        this.imgPath = file.name
        if (file !== null) {
          const _this = this
          var reader = new FileReader();//创建一个字符流对象
          reader.readAsDataURL(file);//读取本地图片
          reader.onload = function(e) {
          //  console.log('通过图片注册去掉BASE64前缀后为: ' + this.result.replace(/^data:image\/\w+;base64,/, ''))
            var formData = new FormData()
            formData.append("image", this.result.replace(/^data:image\/\w+;base64,/, ''))
            formData.append("userId", _this.$store.state.user.userId)
            addInfo(formData).then(res => {
              console.log(res.data)
              if (res.msg === '左眼被遮挡!') {
                this.msgError('左眼被遮挡!')
              } else if (res.msg === '右眼被遮挡!') {
                this.msgError('右眼被遮挡!')
              } else if (res.msg === '鼻子被遮挡!') {
                this.msgError('鼻子被遮挡!')
              } else if (res.msg === '嘴巴被遮挡!') {
                this.msgError('嘴巴被遮挡!')
              } else if (res.msg === '左脸颊被遮挡!') {
                this.msgError('左脸颊被遮挡!')
              } else if (res.msg === '右脸颊被遮挡!') {
                this.msgError('右脸颊被遮挡!')
              } else if (res.msg === '左眼被遮挡!') {
                this.msgError('左眼被遮挡!')
              } else if (res.msg === '下巴被遮挡!') {
                this.msgError('下巴被遮挡!')
              } else if (res.msg === '光线不足!') {
                this.msgError('光线不足!')
              } else if (res.msg === '人脸注册成功!') {
                this.msgSuccess('人脸注册成功!')
              }
            })
          };
        }
      },

      takeVideo() {
        // 如果ref是定位在有v-if、v-for、v-show中的DOM节点，返回来的只能是undefined，因为在mounted阶段他们根本不存在
        let video = this.$refs.videoCtrl
        this.$refs.videoCtrl.style.display = 'block'
        this.$refs.imgCtrl.style.display = 'none'
        let constraints = {
          video: {width: 360, height: 360},
          audio: true
        };

        let promise = navigator.mediaDevices.getUserMedia(constraints);
        promise.then(function (MediaStream) {
          video.srcObject = MediaStream;
          video.play();
        });

      },

      // 提交人脸按钮
      takePhoto() {
          let video = this.$refs.videoCtrl
          let canvas = this.$refs.canvasCtrl
          let context = canvas.getContext("2d");
          context.drawImage(video, 0, 0, canvas.width, canvas.height);
          var base64File = canvas.toDataURL();
          var formData = new FormData()
          formData.append("image", base64File.toString().replace(/^data:image\/\w+;base64,/, ''))
          formData.append("userId", this.$store.state.user.userId)
         // console.log('去掉BASE64前缀后为: ' + this.form.image)
          addInfo(formData).then(res => {
            console.log(res.data)
            if (res.msg === '左眼被遮挡!') {
              this.msgError('左眼被遮挡!')
            } else if (res.msg === '右眼被遮挡!') {
              this.msgError('右眼被遮挡!')
            } else if (res.msg === '鼻子被遮挡!') {
              this.msgError('鼻子被遮挡!')
            } else if (res.msg === '嘴巴被遮挡!') {
              this.msgError('嘴巴被遮挡!')
            } else if (res.msg === '左脸颊被遮挡!') {
              this.msgError('左脸颊被遮挡!')
            } else if (res.msg === '右脸颊被遮挡!') {
              this.msgError('右脸颊被遮挡!')
            } else if (res.msg === '左眼被遮挡!') {
              this.msgError('左眼被遮挡!')
            } else if (res.msg === '下巴被遮挡!') {
              this.msgError('下巴被遮挡!')
            } else if (res.msg === '光线不足!') {
              this.msgError('光线不足!')
            } else if (res.msg === '人脸注册成功!') {
              this.msgSuccess('人脸注册成功!')
            }
          })
        }
      }
  }
</script>
